<template>
    <Header title="店铺"></Header>

    <div class="foodClassify">

        <div class="name">
            {{ title }}
            <img :src="img" class="store_img">
        </div>


        <div class="classify">
          <van-tabs>
              <van-tab v-for="(i,index) in storeData" :title="i.name"></van-tab>
          </van-tabs> 
        </div>

    </div>

    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>

</template>

<script setup>
    import Header from '@/components/Header.vue';
    import { onMounted, reactive, toRefs } from 'vue';
    import { getStoreData } from '@/request/api';
    import { useRoute } from 'vue-router'

    const route = useRoute()

    const data = reactive({
        storeData: [],
        title:'',
        img:''
      })

    const {storeData,title,img} = {...toRefs(data)}

    //初始化数据
    const getData = ()=>{
      getStoreData().then((res)=>{
        if(res.status === 200){
          res.data.stores.forEach((item)=>{
            if(item.title == route.query.title){
                storeData.value = item.storeData
                title.value = item.title
                img.value = item.img
            }
          })
        }
      })
    }

    onMounted(()=>{
      getData()
    })
</script>

<style lang="less">
    .foodClassify {
      height: 500px;
      background-color: #fff;
      margin-top: 20px;
      border-radius: 20px 20px 0 0;
      background-image: linear-gradient(#fff, #f5f5f5);

      .classify {
        margin-top: 10px;
      }
      .name {
        display: flex;
        padding: 20px;
        justify-content: space-between;
        font-size: 18px;
        .store_img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
          margin-top: -30px;
        }
      }
    }
</style>